import React, { useState, useEffect, useRef } from 'react';
import { Dialog } from '@alifd/next';
import { observer } from 'mobx-react-lite';
import html2canvas from 'html2canvas';
import styles from './index.module.scss';
import { DialogProps } from '@alifd/next/types/dialog';
import { t } from '@lingui/macro';

interface QRProps extends DialogProps {
  visible: string, // 二维码描述文字
  name: string, // 二维码描述文字
  onCancel: () => void, // 关闭modal事件
  describe?: string, // 底部文字描述
  modalStyle?: Object; // modal自定义样式
  url: string, // url核心链接
  okText?: string, // 自定义确定按钮文字
  cancelText?: string, // 自定义取消按钮文字
}

export default observer(({ name, visible, url, onCancel, ...props }: QRProps) => {
  const [imgUrl, setImgUrl] = useState('');
  const divRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (visible) {
      setImgUrl(url);
    }
  }, [visible, url]);

  const cancelHandle = () => {
    onCancel?.();
  };

  const downloadPng = () => {
    // 使用 html2canvas 将 div 转换为图片，并下载到本地
    setTimeout(() => {
      if (divRef.current) {
        html2canvas(divRef.current, { useCORS: true }).then((canvas) => {
          const link = document.createElement('a');
          link.href = canvas.toDataURL('image/png');
          link.download = t`${name}.png`;
          link.click();
          onCancel();
        });
      }
    }, 500);
  };

  return (
    <>
      <Dialog
        v2
        title={t`【${name}】专属二维码`}
        visible={visible}
        style={{ width: 500, ...props.style }}
        onOk={downloadPng}
        okProps={{ children: props.okText }}
        onClose={cancelHandle}
        cancelProps={{ children: props.cancelText }}
        {...props}
      >
        <div
          // 使用非空断言运算符 ! 来告诉 TypeScript 你确定 ref 不会为 null
          ref={divRef!}
          id="qrcode-container"
          className={styles.qr_container}
        >
          <div className={styles.qr_content}>
            <img src={imgUrl} style={{ width: '70%' }} alt={''} />
            <div style={{ marginTop: 40 }}>{props.describe}</div>
          </div>
        </div>
      </Dialog>
    </>
  );
});
